@import './common';

page,.page{
	background:linear-gradient(180deg,#000000 0%,#1F1F1F 100%);
}

.head{
	box-sizing:border-box;
	padding: setSize(24);

	.info-box{

		.avat-box{
			margin-right: setSize(28);

			.img{
				display: block;
				width: setSize(140);
				height: setSize(140);
				border-radius: 50%;
			}
		}

		.count-wrap{

			.name-box{

				.name{
					font-size:setSize(34);
					font-weight:500;
				}

				.img-box{
					margin-left: setSize(20);

					.img{
						display: block;
						width: setSize(22);
						height: setSize(22);
					}
				}
			}

			.sub-text{
				margin-top: setSize(20);
				font-size:setSize(22);
				font-weight:400;
				color:#999;
				line-height:setSize(28);
			}
		}
	}

	.count-box{
		margin-top: setSize(30);
		font-size: setSize(24);
		color: #CECECE;
		font-weight:400;
		text-align: center;

		.count{
			margin-bottom: setSize(10);
			font-size: setSize(30);
			color: $textColor;
		}

		.red{
			color: #ff2828;
		}

		.img-box{

			.img{
				display: block;
				width: setSize(48);
				height: setSize(48);
			}
		}
	}
}

.section-wrap{
	box-sizing:border-box;
	padding:setSize(1) setSize(24) setSize(24);

	.lists-wrap{
		background-color:#2D2D2D;
		border-radius:setSize(8);

		.lists-top{
			box-sizing:border-box;
			padding:0 setSize(60) 0 setSize(24);
			margin-top: setSize(12);
			border-bottom:setSize(1) solid $subBgWin;

			.title{
				line-height: setSize(88);
				font-size:setSize(28);
				font-weight:400;
			}

			.sub-text{
				line-height: setSize(88);
				font-size:setSize(24);
				font-weight:400;
				color:#999999;
			}

			.cell-icon{
				align-items:center;
				box-sizing:border-box; 	
				padding-right:setSize(10);
				margin-left: setSize(4);

				.icon{
					width: setSize(16);
					height: setSize(16);		
					display: inline-block;
					box-sizing:border-box; 
					border-right: setSize(3) solid #C7C7CC; 
					border-top: setSize(3) solid #C7C7CC;   
					transform: rotate(45deg); 
				}
			}
		}

		.cells{

			.cell-item{
				padding:setSize(44) 0 setSize(24);

				.img-box{
					width: setSize(52);
					height: setSize(52);

					.img{
						display: block;
						width: 100%;
						height: 100%;
					}
				}

				.text{
					margin-top: setSize(16);
					font-size:setSize(24);
					font-weight:400;
					color:#CECECE;
				}
			}
		}
	}
}

.cells-container{
	margin-top: setSize(20);
}

.cells{

	.cell+.cell{
		border-top:setSize(2) solid $subBgWin;
	}

	.cell{
		align-items:center;
		box-sizing:border-box;
		padding: setSize(24);

		.img-box{
			width: setSize(36);
			height: setSize(36);
			margin-right: setSize(20);

			.img{
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.cell-item{
			height: setSize(48);
			line-height: setSize(48);
			overflow: hidden;
			white-space: nowrap;
			text-overflow:ellipsis;

			.head-icon{
				display: block;
				width: setSize(48);
				height: setSize(48);
				margin-right: setSize(20);
			}

		}

		.sub-cell-item{
			box-sizing:border-box;
			padding:0 setSize(20);
			font-size:setSize(30);
			font-weight:600;
			color:#333;
		}

		.cell-item-text{
			font-size: setSize(30);			
		}

		.notify{
			display: inline-block;
			width: setSize(30);
			height: setSize(30);
			line-height: setSize(30);
			margin-left: setSize(20);
			font-size: setSize(22);
			text-align: center;
			color: #fff;
			background-color:red;
			border-radius:50%;
		}

		.cell-icon{
			align-items:center;
			box-sizing:border-box; 	
			padding-right:setSize(10);
			margin-left: setSize(4);

			.icon{
				width: setSize(25);
				height: setSize(25);		
				display: inline-block;
				box-sizing:border-box; 
				border-right: setSize(3) solid #C7C7CC; 
				border-top: setSize(3) solid #C7C7CC;   
				transform: rotate(45deg); 
			}
		}
	}
}